import React from 'react';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider, WeaSearchInput, WeaReqTop, WeaRightMenu, WeaTab, WeaSelect, WeaTableEdit, WeaNewScroll, WeaDialog, WeaBrowser } from 'ecCom';
import { Modal, message, Button } from "antd";
import { WeaTableNew } from "comsMobx";
import { toJS } from "mobx";
import {Text} from '../util/text';
const text = new Text();
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ComposEdit extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: false,
            type: ""
        }
    }

    onChange = datas => {
        const { composingStore } = this.props;
        composingStore._datas = datas;
    }

    onComFirm = () => {
        const { composingStore } = this.props;
        composingStore.onChangeEdit();
    }

    addInfoSifting = (record) => {
        const { composingStore } = this.props;
        record.datas.map(c => {
            composingStore._datas.push({
                id: c.id,
                j_column: c.j_column,
                reportorg: c.reportorgspan,
                title: c.title
            });
        });
        //alert(JSON.stringify(composingStore._datas));
    }

    onRowSelect = (sRowKeys, rows, dataIndex, selectedDatas) => {
        const { composingStore} = this.props;
        composingStore._selectedRowKeys = sRowKeys;
    }

    doEdit = (type) => {
        const {composingStore} = this.props;
        //this.setState({ type: type });
        composingStore.initEditDialog({ j_type: composingStore.j_type });
        composingStore.setState({ _visible: true });
    }

    //批量修改栏目
    batchChangeColumn = (record, index) => {
        const {composingStore} = this.props;
        //根据selectedRowkeys进行修改
        composingStore._selectedRowKeys.map((m, i) => {
            composingStore._datas[m].j_column = record.id;
        });
        composingStore.setState({ _visible: false });
    }

    render() {
        const { composingStore} = this.props;
        const { showEdit, _selectedRowKeys, columns, _datas, docstatus, closeEdit } = this.props.composingStore;
        const props = {
            type: 'primary',
        }
        let ids = [];       //遍历可编辑列表得到所有的id
        _datas.map(m => {
            ids.push(m.id);
        });
        let btns = new Array();
        btns.push(
            <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@k9knub@infoBrowser`}
                ref="infoBrowser"
                title={text.EDITINFO}
                type={'infoSifting'}
                isSingle={false}
                customized
                dataParams={{ ids: ids, j_type: composingStore.j_type, journalId: composingStore.journalId }}
                conditionDataParams={{ j_type: composingStore.j_type }}
                buttons={
                    [
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@w7jtcg@addInfoSifting`} onClick={() => { this.addInfoSifting(this.refs.infoBrowser.get()); this.refs.infoBrowser.closeModal() } }>{text.SURE}</Button>,
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cgs1l6@CANCEL`} onClick={() => this.refs.infoBrowser.closeModal() }>{text.CANCEL}</Button>
                    ]
                }
                >
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dnrh05@ADD`} type="primary" >{text.ADD}</Button>
            </WeaBrowser>
        );
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@wobtg2@doDelete`} {...props} onClick={() => composingStore._tableEdit.refs.edit.doDelete() } type="primary" disabled={_selectedRowKeys.length === 0}>{text.DELETE}</Button>);
        btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ik9dtd@doEdit`} {...props} onClick={this.doEdit} type="primary" disabled={_selectedRowKeys.length === 0}>{text.UPDATE}</Button>);

        return (
            <div>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@i7e9fn`}
                    icon="icon-coms-government"
                    iconBgcolor='#f14a2d'
                    title={text.UPDATE}
                    visible={showEdit}
                    style={{ width: 500, height: 500 }}
                    onCancel={() => closeEdit(false) }
                    modalBody="body"
                    buttons={[(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lcgaw6@onComFirm`} type="primary" onClick={this.onComFirm}>{text.SURE}</Button>)
                        //(<Button type="ghost" onClick={() => setState({ upVisible: false })}>{text.CANCEL}</Button>)
                    ]}
                    >
                    <div className='info-compos-containers'>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@tmka8y`} buttons={btns} />
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@tsev3h`} height='300px'>
                            <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@rbnw01`}
                                ref={el => { composingStore._tableEdit = el } }
                                showTitle={false}
                                columns={toJS(columns) }
                                datas={toJS(_datas) }
                                draggable={docstatus < 3}
                                showAdd={false}
                                showCopy={false}
                                showDelete={false}
                                onChange={this.onChange}
                                onRowSelect={this.onRowSelect}
                                selectedRowKeys={_selectedRowKeys}
                                />
                        </WeaNewScroll>
                    </div>
                </WeaDialog>
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@s4j7kr`}
                    icon="icon-coms-government"
                    iconBgcolor='#f14a2d'
                    title={text.CHOOSECOLUMN}
                    visible={composingStore.status._visible}
                    style={{ width: 500, height: 300 }}
                    onCancel={() => composingStore.setState({ _visible: false }) }
                    buttons={[
                        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v6fc7a@CANCEL`} type="ghost" onClick ={() => composingStore.setState({ _visible: false }) }>{text.CANCEL}</Button>)
                    ]}
                    >
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@3zqtpo`} height='100%'>
                        <div>
                            <div style={{ width: '350px', margin: '30px auto' }}>
                                <WeaSearchInput ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchInput@l8hmgq`}
                                    onSearch={v => this.search(v) }
                                    searchFunc={(v) => this.search(v) }
                                    />
                            </div>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@k4vuet`} comsWeaTableStore={composingStore.editTableStore}
                                onRowClick={(record, index) => { this.batchChangeColumn(record, index) } }
                                className="wea-info-table"
                                needScroll={true}
                                />
                        </div>
                    </WeaNewScroll>
                </WeaDialog>
            </div>
        )
    }
}
